<template>
	<image src="../../static/image/12.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="订单详情"
	:autoBack="true"
	:background="{
	background:'transparent'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#333"
	back-icon-color="#333"
	:isFixed="false"
	/>
	
	
	<view class="" v-if="data">
		<view class="container">
			<view class="card">
				<image src="../../static/image/13.png" mode="widthFix" class="img"></image>
				<view class="content cf" v-if="['0','3'].includes(data.orderInfo.status)">
					<view class="f36 bold">
						{{statusLabel[data.orderInfo.status]}}
						<text class="f24 " v-if="data.orderInfo.status == 0">（剩余支付时间：{{extime}}）</text>
					</view>
					<view class="t-flex between mt10">
						<view class="">
							订单号
						</view>
						<view class="">
							{{data.orderInfo.order_sn}}
						</view>
					</view>
				</view>
				<view class="content cf t-flex between" v-else>
					<view class="">
						<view class="f36 bold">
							{{statusLabel[data.orderInfo.status]}}
						</view>
						<view class="mt10">
							陪练师傅：{{data.orderInfo.sf_nickname}}
						</view>
					</view>
					<view class="right t-flex center bgf mainC f30 bold" @click="showQrcode" v-if="data.orderInfo.status == 1">
						核销码
					</view>
				</view>
			</view>
			
			<view class="ath bgf r10 mt20 t-flex between" @click="$go('/pages/authentication/authentication?id='+data.orderInfo.sf_user_id)"
			v-if="data.orderInfo.sf_user_id"
			>
				<view class="t-flex">
					<image src="../../static/image/10.png" mode="aspectFit" class="icon"></image>
					<view class="ml20 bold">
						平台认证
					</view>
				</view>
				
				<i class="iconfont icon-xiangyou1"></i>
			</view>
			
			
			
			<view class="bgf p30 r20 mt20">
				<view class="goods t-flex between mb20" v-for="item,index in data.orderGoodsInfo" :key="item.id">
					<uv-image :src="$str.img(item.image)" mode="aspectFill"
					width="200rpx"
					height="160rpx"
					radius="20rpx"
					></uv-image>
					<view class="right">
						<view class="f32 c3 bold">
							{{item.good_name}}{{item.good_title}}
						</view>
						<view class="mt20">
							<text class="prc f32 bold">￥{{item.price}}</text> <text class="mprc ml20 bold">￥{{data.marketPriceList[index]}}</text>
						</view>
					</view>
				</view>
				
				<view class=" tright">
					小计：￥{{data.orderInfo.shippingfee.xm_price}}
				</view>
				
				
				
			</view>
			
			<view class="bgf p30 r20 mt20">
				<view class="f32 c3 bold">
					订单信息
				</view>
				
				<view class="li t-flex between mt20">
					<view class="c6">创建时间</view>
					<view class="c3">
						{{$time(data.orderInfo.createtime)}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">订单金额</view>
					<view class="c3">
						￥{{data.orderInfo.payamount}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">现金券</view>
					<view class="c3">
						-￥{{data.orderInfo.shippingfee.yhq_price}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">助力减免</view>
					<view class="c3">
						-￥{{data.orderInfo.shippingfee.zl_price}}
					</view>
				</view>
				<view class="li t-flex between mt20" v-if="data.orderInfo.is_buy_bx == 1">
					<view class="c6">保险金额</view>
					<view class="c3">
						￥{{data.orderInfo.shippingfee.bx_price}}
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">付款方式</view>
					<view class="c3">
						微信
					</view>
				</view>
				<view class="li t-flex between mt20">
					<view class="c6">支付金额</view>
					<view class="c3">
						￥{{data.orderInfo.payamount}}
					</view>
				</view>
			</view>
			
			<view class="bgf p30 r20 mt20" v-if="data.htList.length">
				<view class="f32 c3 bold mb20">
					合同
				</view>
				
				<fileBox :shoeClose="false" :list="data.htList"></fileBox>
			</view>
			
		</view>
		<view class="bpad"></view>
		
		<view class="bottom t-flex center safeArea bgf" v-if="['0','1','2'].includes(data.orderInfo.status)">
			<view class="bottomcontent t-flex">
				<view class="btn t-flex center s1" @click="$go('/pages/shareOrder/shareOrder?id='+data.orderInfo.id)"
				v-if="data.orderInfo.status == 0"
				>
					查看助力
				</view>
				<view class="btn t-flex center s1" @click="cancle"
				v-if="data.orderInfo.status == 0"
				>
					取消订单
				</view>
				<view class="btn t-flex center s2" 
				v-if="data.orderInfo.status == 1"
				@click="$go('/pages/order/booking?id='+data.orderInfo.id)"
				>
					预约课程
				</view>
				<view class="btn t-flex center s2" @click="pay"
				v-if="data.orderInfo.status == 0"
				>
					立即支付
				</view>
				<view class="btn t-flex center s2" 
				v-if="data.orderInfo.status == 2"
				@click="$go('/pages/order/comment?id='+data.orderInfo.id)"
				>
					去评价
				</view>
			</view>
		</view>
	</view>
	<loading v-else></loading>

	
	
	<u-popup mode="center" v-model="qrcode.show" borderRadius="20">
		<view class="pop" v-if="qrcode.show">
			<u-qrcode :value="qrcode.value" canvasId="qrcode1" size="300"></u-qrcode>
		</view>
	</u-popup>
	
</template>

<script setup lang="ts">
import { ref,reactive, computed } from 'vue';
import { onLoad,onShow,onUnload } from "@dcloudio/uni-app"
import { cancleOrder, orderDetail, payOrder } from '../../api';
import { useStore } from '../../store';
import { getLastOrder, getMarketPrice, showToast } from '../../lib/ts/util';
	
	const store = useStore()
	let statusLabel = ['待付款','待服务','待评价','支付取消','待服务取消','已评价']
	
	onLoad(options=>{
		getdata(options.id)
	})
	onShow(()=>{
		if(data.value){
			getdata(data.value.orderInfo.id)
		}
	})
	onUnload(()=>{
		clearInterval(timer)
	})
	
	let data = ref()
	const getdata = async (id:number)=>{
		let res = await orderDetail(id)
		res.orderInfo.shippingfee = JSON.parse(res.orderInfo.shippingfee)
		let htlist = res.orderGoodsInfo.map(item=>item.ht_info).filter(item=>item)
		res.htList =  Array.from(new Set(htlist)).map(item=>{return {url:item}})
		res.marketPriceList = getMarketPrice(res.orderGoodsInfo.map(item=> +item.price),+res.orderInfo.shippingfee.xm_price,+res.orderInfo.good_info.marketprice)
		data.value = res
		
		if(res.orderInfo.status == 0){
			inittimer()
		}
	}
	
	
	const pay = async  ()=>{
		let paydata = await payOrder(data.value.orderInfo.id)
		store.pay(paydata,'wechat').then(()=>{
			 showToast('支付成功')
			 getdata(data.value.orderInfo.id)
			 uni.$emit('updateOrderList')
		})
	}
	
	//取消订单
	const cancle =  ()=>{
		uni.showModal({
			title:'提示',
			content:'是否确认要取消订单？',
			async success(e) {
				if(e.confirm){
					let res = await cancleOrder(data.value.orderInfo.id)
					showToast(res.msg)
					getdata(data.value.orderInfo.id)
					uni.$emit('updateOrderList')
				}
			}
		})
	}
	
	//核销码
	let qrcode = reactive({
		show:false,
		value:'',
		open(e){
			qrcode.value = e
			qrcode.show = true
		}
	})
	
	//出示核销码
	const showQrcode = ()=>{
		let lastorder =  getLastOrder(data.value.orderGoodsInfo)
		if(lastorder.length){
			qrcode.open(`jzbl?id=${lastorder[0].id}&ht=${!lastorder[0].ht_info?0:1}`)
		}else{
			uni.showModal({
				title:'提示',
				content:'还未预约时间。',
				confirmText:'去预约',
				success(e) {
					if(e.confirm){
						uni.navigateTo({
							url:`/pages/order/booking?id=${data.value.orderInfo.id}`
						})
					}
				}
			})
		}
	}
	
	let nowdate = ref(0)
	let timer = null
	const inittimer = ()=>{
		nowdate.value = Math.floor(+new Date()/1000)
		if(nowdate.value>=data.value.orderInfo.expiretime) return
		clearInterval(timer)
		timer = setInterval(()=>{
			nowdate.value ++
		},1000)
	}
	let extime = computed(()=>{
		let expiretime = data.value.orderInfo.expiretime
		let count = expiretime-nowdate.value
		if(count<=0){
			clearInterval(timer)
			return ''
		}else{
			let s = count%60
			let m = Math.floor(count/60%60)
			let h = Math.floor(count/60/60%60)
			return `${(h+'').padStart(2,'0')}:${(m+'').padStart(2,'0')}:${(s+'').padStart(2,'0')}`
		}
	})
	
	
	

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: absolute;
	}
	.container{
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
	}
	
	.card{
		position: relative;
		.img{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding: 0 30rpx;
			padding-top: 36rpx;
			.right{
				border-radius: 200rpx;
				height: 70rpx;
				width: 160rpx;
			}
		}
	}
	
	
	.goods{
		.right{
			width: calc(100% - 230rpx);
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				text-decoration: line-through;
				font-weight: 400;
			}
		}
	}
	
	.tright{
		text-align: right;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.bottomcontent{
			justify-content: flex-end;
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				padding: 0 24rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				color: #666;
				border: 2rpx solid #EEEEEE;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.ath{
		padding: 20rpx 30rpx;
		.icon{
			width: 48rpx;
			height: 48rpx;
		}
		color: #804101;
		.iconfont{
			color: #999;
		}
	}
	
	.contract{
		width: 160rpx;
	}
	.pop{
		padding: 50rpx;
	}
</style>
